import React from 'react';
import { Form, Input, Select } from 'antd';

const { Item } = Form;
const { Option } = Select;



const UserForm =
    React.forwardRef((props, ref) => {
    const formRef = React.useRef(); // 将之前的 ref 改为 useRef

    React.useImperativeHandle(ref, () => ({
        getFormData: () => {
            const formValues = formRef.current.getFieldsValue();
            return formValues;
        }
    }));
    const { roles } = props;
    let {user} = props
        if(!user){
            user = {}
        }

        console.log('接收的user', user)
    const onFinish = (values) => {
        // 在这里处理收集到的表单数据
        console.log('Received values:', values);
    };

    const FormItemLayout = {
        labelCol: {span: 4},
        wrapperCol: {span: 15},
    }

    return (
        <Form  {...FormItemLayout} ref={formRef} onFinish={onFinish}>
            <Item label={"用户名"}
                  name={"username"}
                  initialValue={user.username}
                  rules={[{ required: true, message: 'Please input your user-name!' }]}
            >
                <Input placeholder={"请输入用户名"}/>
            </Item>
            <Item label={"密码"}
                  initialValue={user.password}
                  name={"password"}
                  rules={[{ required: true, message: 'Please input your password' }]}
            >
                <Input.Password placeholder={"请输入密码"} type={"password"}/>
            </Item>
            <Item label={"手机号"}
                  name={"phone"}
                  initialValue={user.phone}
                  rules={[{ required: true, message: 'Please input your phone' }]}
            >
                <Input placeholder={"请输入手机号"}/>
            </Item>
            <Item label={"邮箱"}
                  name={"email"}
                  initialValue={user.email}
            >
                <Input placeholder={"请输入邮箱"}/>
            </Item>
            <Item label={"角色"}
                  initialValue={''}
                  name={"role"}
            >
                <Select placeholder={"请选择角色"}>
                    {roles.map(role=>
                        <Option key={role._id} value={role._id}>
                            {role.name}
                        </Option>)}
                </Select>
            </Item>
        </Form>
    );
}
)

export default UserForm;
